<template>
  <Card v-for="item in arr" :key="item" :content="item"></Card>
  <Tree :treeList="treeList" @on-click="get"></Tree>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
// 导入 TreeList 接口
import { TreeList } from './types'
import Tree from './components/Tree/index.vue'

// 全局组件：在 main.js 中导入后，对 App 实例调用 component 方法注册的组件
// 可以在任意组件中不经引入就可以使用
// 第一个参数为注册的组件名，字符串类型，第二个参数为需要注册的组件实例
// createApp(App).component(name: string, component: Component)

// 局部组件：在不同的组件中使用 import 导入并使用的组件

// 递归组件：组件需递归调用自身
// 在递归组件中另写 script 标签并使用 export default 将组件导出
// 在组件 html 模板中使用导出的组件标签实现递归调用
// 递归存在 v-for 的循环以及 v-if 的结束递归的条件判断
// 在递归组件中传递参数，需要采用自定义事件并可能需要阻止冒泡
// 自定义事件，并设置可以触发自定义事件的函数
// 即在 html 模板中的递归组件标签中绑定自定义事件，并将自定义事件的事件处理函数设置为可以触发自定义事件的函数
// 即整体思路为将导出的递归组件封装，并在本组件中调用
const treeList = reactive<TreeList[]>([
  {
    name: 'no-1',
    children: [
      {
        name: 'no-1-1',
        children: [{ name: 'no-1-1-1' }, { name: 'no-1-1-2' }],
      },
    ],
  },
  { name: 'no-2', children: [{ name: 'no-2-1' }, { name: 'no-2-2' }] },
  { name: 'no-3' },
  { name: 'no-4' },
])
const get = (item: TreeList) => {
  console.log(item.name)
}

const arr = reactive(['1', '2', '3'])
</script>
<style scoped></style>
